<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react操作DOM的核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、当需要书写JSX结构的时候，引入babel文件-->
    <script src="./js/babel.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .hot-news {
            width: 500px;
            margin: 50px auto;
        }

        hr {
            margin: 10px 0;
        }

        li {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .order {
            font-size: 20px;
            margin-right: 10px;
        }

        .title {
            margin-right: 10px;
        }

        .hot {
            background: rgb(211, 34, 34);
            font-size: 10px;
            color: white;
            padding: 2px 3px;
            border-radius: 5px;
        }

        .index-1 {
            color: rgb(190, 7, 7);
        }

        .index-2 {
            color: rgb(211, 34, 34)
        }

        .index-3 {
            color: rgb(197, 88, 16)
        }
    </style>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--5、设置script标签中内容类型为:text/babel-->
    <script type="text/babel">
        //6、获取根容器元素对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        let data = [
            {
                id: 1,
                title: "河北通勤车坠河瞬间曝光",
                time: "2022-06-27",
                is_hot: true, //是否为热门
                is_new: false, //是否最新的新闻
            },
            {
                id: 2,
                title: "国足公布对阵沙特23人大名单",
                time: "2023-06-22",
                is_hot: true,
                is_new: false,
            },
            {
                id: 3,
                title: "“争控”成中印边境谈判关键词",
                time: "2023-05-22",
                is_hot: true,
                is_new: false,
            },
            {
                id: 4,
                title: "五粮液独董郎定常因突发疾病去世",
                time: "2024-04-22",
                is_hot: false,
                is_new: false,
            },
            {
                id: 5,
                title: "王立科被逮捕：曾想停播人民的名义",
                time: "2025-03-22",
                is_hot: false,
                is_new: true,
            },
            {
                id: 6,
                title: "台风“圆规”路径",
                is_hot: true,
                is_new: false,
                time: "2022-07-22",
            },
            {
                id: 7,
                title: "保姆报复前雇主偷走其最爱煎锅",
                is_hot: true,
                is_new: false,
                time: "2022-08-22",
            },
            {
                id: 8,
                title: "中国南海军事演习引发海外关注",
                is_hot: false,
                is_new: false,
                time: "2022-09-06",
            },
            {
                id: 9,
                title: "河北坠河班车已致14人遇难",
                is_hot: true,
                is_new: false,
                time: "2022-10-25",
            },
        ];
        //7、创建虚拟DOM
        let vDOM = <div className="hot-news">
            <h2>头条热榜</h2>
            <hr />
            <ul>
                {
                    data.map(item => {
                        return (
                            <li key={item.id}>
                                <span className={`order index-${item.id}`}>{item.id}</span>
                                <span className="title">{item.title}</span>
                                {item.is_hot && <span className="hot">热</span>}
                            </li>
                        )
                    })
                }

            </ul>
        </div>
        //8、渲染
        root.render(vDOM);
    </script>
</body>

</html>